<template>
    <div class="boxContentCss">
        <EdCreateCard title="基本信息">
            <div class="createBack" @click="$utilsSet.goBack($router)" >
                <svg-icon icon-class="back" /> 返回
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基础数据配置" name="first">
                    <el-form ref="projectFormRef" :model="projectForm" label-position="right" label-width="auto">
                            <el-row :gutter="30">
                                <el-col :span="6">
                                    <el-form-item label="房屋总面积" prop="area":rules="$validate.validates({type: 'money'})">
                                        <el-input class="flex-input" placeholder="请输入" v-model="projectForm.area">
                                            <i slot="suffix" style="font-style:normal;margin-right: 10px;">㎡</i>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="项目车位总数"  prop="parkTotal" >
                                        <el-input class="flex-input" placeholder="请输入" v-model.number="projectForm.parkTotal" oninput="this.value=this.value.replace(/[^0-9]/g,'')"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="物业费平均单价" prop="propertyFee">
                                        <el-input class="flex-input" placeholder="请输入" v-model="projectForm.propertyFee" @input="limitInput($event,'propertyFee')">
                                            <i slot="suffix" style="font-style:normal;margin-right: 10px;">元</i>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="被购买车位数" prop="buyParkNumber" >
                                        <el-input class="flex-input" placeholder="请输入" v-model.number="projectForm.buyParkNumber" @blur="buyParkBlur" oninput="this.value=this.value.replace(/[^0-9]/g,'')"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-form-item>
                                <el-button class="ed-button ed_black-bottom" @click="saveList('projectFormRef')" >确定</el-button>
                                <el-button class="ed-button ed_white_bottom" @click="$utilsSet.goBack($router)">取消</el-button>
                            </el-form-item>
                        <!-- </div> -->
                    </el-form>
                </el-tab-pane>
                <!-- <el-tab-pane label="增值服务配置" name="second">
                    <ApiTable :api="tableApi" ref="table" :params="queryForm">
                        <el-table-column type="index" width="80" label="序号"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="name" label="增值服务"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="status" label="状态">
                            <template slot-scope="scope">
                                {{scope.row.status == '0' ? '停用' : '启用'}}
                                <el-switch
                                    :value="scope.row.status == '1' ? true : false"
                                    @change="switchChange(scope.row, scope.row.status == '1' ? '0' : '1')"
                                    active-color="#EED096"
                                    inactive-color="#909399">
                                </el-switch>
                            </template>
                        </el-table-column> 
                    </ApiTable>
                </el-tab-pane> -->
            </el-tabs>
        </EdCreateCard>
    </div>
</template>

<script>
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import { defineComponent } from 'vue'
    import EdSelect from 'src/components/EdSelect.vue'
    import { projectData,checkQueryData,ParkData, openService, closeService,incrementServiceList} from "./api";
    import ApiTable from 'src/components/ApiTable.vue'
    export default defineComponent({
        name: "companyCreate",
        components: { EdCreateCard,EdSelect,ApiTable},
        data(){
            return{
                projectForm:{
                    area: '',
                    buyParkNumber: '',
                    parkTotal: '',
                    propertyFee: '',
                    villageId: '',
                    villageName: ""
                },
                payForm:{
                    planDateDTOList: [
                        {
                            id:'',
                            configId:'',
                            orgId: this.$store.getters.vid,
                            villageId:this.$route.query.villageId,
                            villageName:'',
                            parkId:'', 
                            stationNo:'', 
                            baseUrl:''
                        }
                    ],
                },
                disabled:false,
                isUpdate: false,
                activeName: 'first',
                name_1: false,
                // 增值服务
                queryForm: {
                    villageId: this.$route.query.villageId,
                }
            }
        },
        watch:{
            "$store.getters.vid": {
                handler(newVal, oldVal) {
                    if(newVal) {
                        this.node = ''
                    }
                }
            },
        },
        activated(){
            this.isActiveted = true
            if (this.$route.query.villageId) {
                this.queryForm.villageId = this.$route.query.villageId
                this.projectForm.villageId = this.$route.query.villageId
                this.projectForm.villageName = this.$route.query.villageName
                this.checkQueryData()
            }
        },
        deactivated() {
            this.isActiveted = false
            this.projectForm = {}
            this.projectForm ={
                area: '',
                buyParkNumber: '',
                parkTotal: '',
                propertyFee: '',
                villageId: '',
                villageName: ""
            }
            this.activeName = 'first'
        },
        methods:{
            tableApi: incrementServiceList,
            saveList(formName){
                this.$refs[formName].validate((valid) => {
                    if(valid){
                        if(this.projectForm.buyParkNumber&& this.projectForm.parkTotal){
                            if(this.projectForm.buyParkNumber>this.projectForm.parkTotal){
                                // console.log('11', this.projectForm.buyParkNumber>this.projectForm.parkTotal)
                                this.$message.warning({
                                    message:'购买车位数不能大于项目总数',
                                    duration: 2000,
                                    center:true
                                })
                                return
                            }
                        }
                        projectData(this.projectForm).then(response => {
                            if(response.success) {
                                this.$message.success({
                                    message: '添加项目基础数据成功！',
                                    duration: 2000,
                                    center:true
                                });
                                this.$router.back()
                            }
                        })  
                    }
                })
            },
            handleClick(e){
                if(e.name=="first"){
                    if (this.$route.query.villageId) {
                        this.queryForm.villageId = this.$route.query.villageId
                        this.projectForm.villageId = this.$route.query.villageId
                        this.projectForm.villageName = this.$route.query.villageName
                        this.checkQueryData()
                        // this.ParkData()
                    }
                }
                if(e.name=="second"){
                    this.ParkData()
                }
            },
            // 停车配置回显接口
            checkQueryData(){
                checkQueryData(this.projectForm).then(response=>{
                    if(response.success){
                        this.projectForm = {
                            ...this.projectForm,
                            ...response.data
                        }
                    }
                })
            },
            ParkData(){
                ParkData({villageId:this.$route.query.villageId}).then(response=>{
                    if(response.success && response.data && response.data.length>0){
                        response.data&&response.data.map((v, i)=>{
                            v['id'] = v['configId']
                        })
                        this.payForm.planDateDTOList = response.data
                    }
                })
            },
            limitInput(value, name) {
                let val = (value && value.split("")) || [];
                let reg1 = /\d/;
                let reg2 = /\./;
                // 第一个字符不能为小数点
                if (val[0] == ".") {
                    this.form[name] = "";
                    return;
                }
                // 过滤掉除数字和小数点外的字符
                val = val.filter((e) => reg1.test(e) || reg2.test(e));
                // 匹配小数点后只能有两位小数 ^\d* 是指以数字开头，后面允许输入0到多位数字 (\.?) 
                // 是指只允许一个小数点 \d{0,2} 是指只允许0到2位小数
                this.projectForm[name] = val.join("").match(/^\d*(\.?\d{0,2})/g)[0] || null;
            },
            buyParkBlur(){
                if(this.projectForm.buyParkNumber&& this.projectForm.parkTotal){
                    if(this.projectForm.buyParkNumber>this.projectForm.parkTotal){
                        this.$message.warning('购买车位数不能大于项目总数')
                        this.projectForm.buyParkNumber = ''
                    }
                }
            },
            // 增值服务 启用/停用
            switchChange(row, value){
                // vasType： 1.房屋租赁 2.车位租赁 3.装修申报 4.工具借用
                let vasType;
                if(row.name == '房屋租赁'){
                    vasType = 1
                }else if(row.name == '车位租赁'){
                    vasType = 2
                }else if(row.name == '装修申报'){
                    vasType = 3
                }else if(row.name == '工具借用'){
                    vasType = 4
                }
                let params = {
                    villageId: this.$route.query.villageId,
                    vasType,
                }
                let func = value==1 ? openService : closeService;
                func(params).then(res => {
                    if(res.code === 20000){
                        this.$message.success({
                            message: value == '1' ? '启用成功' : '停用成功',
                            duration: 2000,
                            center:true
                        })
                        this.$refs.table.load()
                    }
                })
            },
        }
    })
</script>

<style scoped lang="scss">
    :deep {
        .el-tabs{
            padding: 24px 40px !important;
            
            .el-tabs__item{
                font-size: 18px !important;
            }
        }
    }
     .boxContentCss{
        position: relative;
        .createBack{
            position: absolute;
            top: 28px;
            right: 42px;
            z-index: 10;
        }
    }
</style>